<template>
	<view class="vipPopupClas">
		<view class="vipMain">
			<view class="full-width">
				<slot></slot>
			</view>
		</view>
		<view class="dialog__backdrop" @click.stop="closePopup">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			closePopup() {
				this.$emit('closePopup')
			}
		}
	}
</script>

<style lang="less" scoped>
	.dialog__backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		background: rgba(14, 18, 36, 0.7);
		pointer-events: all;
	}

	.vipPopupClas {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 4;
		transform: translateZ(0);
		pointer-events: none;

		.vipMain {
			position: fixed;
			border-radius: 0.5rem;
			min-width: 200px;
			max-width: 800px;
			background: #1e232a;
			color: #adadc2;
			max-height: calc(100vh - 48px);
			pointer-events: all;
			z-index: 4;

			.full-width {
				border-radius: inherit;
				width: 100%;
				box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12);
			}
		}

	}

	@media screen and (max-width: 768px) {
		.vipMain {
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
</style>